import React from 'react';
import { View, Text } from 'react-native';
import { Flex, Button, Modal, Toast } from 'antd-mobile-rn';
import RMCMultiPicker from 'rmc-picker/lib/MultiPicker';
import RMCPicker from 'rmc-picker/lib/Picker';
import constants from '../utils/constants';
import topView from 'rn-topview'







class DatePickerPopup extends React.Component {



    constructor(props) {
        super(props);
        this.state = {
          
            visible: true,
            dateConfig:this.props.dateConfig,
            data:{
                years:[],
                months:[],
                days:[]
            }
           
        }

    }

    _close = () => {
        this.setState({
            visible: false
        });
        if (this.props.onClose) {
            this.props.onClose();
        }
    }
    _onCancel = () => {

        this._close();


    }

    _onOk = () => {

        this._close();
        if (this.props.onOk) {
         
            this.props.onOk();
        }

    }

    componentDidMount(){

        

    }


    render() {
 

        return (

            <Modal visible={this.state.visible} popup animationType="slide-up">
                <View>
                    <Flex style={{ height: 45, padding: 1,borderBottomWidth:1,borderBottomColor:"#ddd" }}>
                        <Flex.Item>
                            <Button activeStyle={{ backgroundColor: "#ccc" }} style={{ borderRadius: 0, borderWidth: 0 }} onClick={this._onCancel}>
                                <Text style={{ color: constants.themeColor }}>取消</Text>
                            </Button>
                        </Flex.Item>
                        <Flex.Item>
                            <Button activeStyle={{ backgroundColor: "#ffffff" }} style={{ borderRadius: 0, borderWidth: 0 }}>
                                <Text style={{ color: "#666" }}>{this.props.title ? this.props.title : "请选择"}</Text>
                            </Button>

                        </Flex.Item>
                        <Flex.Item >
                            <Button activeStyle={{ backgroundColor: "#ccc" }} style={{ borderRadius: 0, borderWidth: 0 }} onClick={this._onOk}>
                                <Text style={{ color: constants.themeColor }}>确定</Text>
                            </Button>
                        </Flex.Item>
                    </Flex>
                    <Flex>
                        <Flex.Item>

                            <RMCMultiPicker selectedValue={[this.state.provinceIndex + ""]} onValueChange={(value, v) => {
                                console.log("value::",value,v);
                                // this.setState({
                                //     provinceIndex: parseInt(value[0]),
                                //     cityIndex:0
                                // })
                            }}>
                                <RMCPicker  >
                                    {
                                        dataList.map((t, i) => {
                                            return (
                                                <RMCPicker.Item key={i} value={i}>{t.label}</RMCPicker.Item>
                                            )
                                        })
                                    }
                                </RMCPicker>
                            </RMCMultiPicker>
                        </Flex.Item>
                        <Flex.Item>

                            <RMCMultiPicker selectedValue={[this.state.cityIndex + ""]} onValueChange={(value, v) => {
                                this.setState({
                                    cityIndex: parseInt(value[0])
                                })
                            }}>
                                <RMCPicker  >
                                    {
                                        cityData.map((t, i) => {
                                            return (
                                                <RMCPicker.Item key={i} value={i}>{t.label}</RMCPicker.Item>
                                            )
                                        })
                                    }
                                </RMCPicker>
                            </RMCMultiPicker>
                        </Flex.Item>
                    </Flex>
                </View>
            </Modal>



        )
    }
}

export default (title, defaultValue) => {
    return new Promise((resolve, reject) => {
        topView.set(
            <CityPickerPopup
                title={title}
                defaultValue={defaultValue}
                onClose={() => { topView.remove(); }}
                onOk={(value) => {
                    resolve(value);
                }}
            />
        )
    });
}